<%@page import="org.springframework.security.core.context.SecurityContextImpl"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
	
	SecurityContextImpl securityContextImpl = (SecurityContextImpl)request.getSession().getAttribute("SPRING_SECURITY_CONTEXT");
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1 user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<link rel="stylesheet"
	href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/swiper.min.css">
<title>店铺详细信息</title>
<script src="<%=basePath%>assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>assets/js/fontSize.js"></script>
<link rel="stylesheet" href="<%=basePath%>/assets/imgTools/helmet.css">
<script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>

<style>
body {
	padding-bottom: 0.8rem;
	padding-top: 2rem
}

.header {
	height: 2rem;
}

.guanzhuanniu {
	height: 0.4rem;
	font-size: 0.2rem;
	border: 1px solid #fff;
	border-radius: 0.2rem;
	line-height: 0.4rem;
	text-align: center;
	display: block;
	color: #fff;
	padding: 0.02rem 0.14rem;
}

.header h3 span.active {
	width: 1rem;
	height: 0.5rem;
	font-size: 0.2rem;
	border: 1px solid red;
	border-radius: 0.2rem;
	line-height: 0.5rem;
	margin: 0.15rem;
	text-align: center;
	color: red;
	background: #fff
}

.header_top {
	width: 70%;
	padding: 0.2rem 10% 0.2rem;
	height: 0.4rem
}

.header_top_fanhui {
	font-size: 0.4rem;
	line-height: 0.4rem;
}

.header_top_sousuo {
	width: 0.4rem;
	height: 0.4rem;
}

.header_bot ul li {
	float: left;
	padding: 0 0.2rem;
	border-bottom: #FF3F25 solid 0.05rem;
}

.header_bot ul li.active {
	border-bottom: #ffffff solid 0.05rem;
}

.header_bot ul li a {
	font-size: 0.24rem;
	line-height: 0.6rem;
	color: #fff;
}

.paixu {
	border-bottom: 1px solid #f8f8f8
}

.paixu ul li {
	float: left;
	padding: 0 0.3rem;
}

.paixu ul li a {
	font-size: 0.24rem;
	line-height: 0.6rem;
}

.content_cont ul li {
	padding: 3%;
	border-bottom: 1px solid #f1f1f1;
	position: relative;
}

.shangjiatupian {
	width: 25%;
	float: left;
}

.shangjiajieshao {
	width: 70%;
	float: right;
	line-height: 0.4rem;
}

.goodsName {
	font-size: 0.24rem;
	line-height: 0.32rem;
	height: 0.8rem;
	/*  padding-bottom:0.1rem; */
}

.dianpupaiming {
	font-size: 0.2rem;
	line-height: 0.36rem
}

.dianpubiaoqian {
	font-size: 0.16rem;
	border: 1px solid red;
	color: red;
	margin-left: 0.1rem;
}

.xiaoliang {
	font-size: 0.18rem;
	line-height: 0.3rem;
}

.dplbjia, .dplbjian {
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 50%;
	border: 1px solid #000;
	display: block;
	margin: 0 0.1rem;
	background: #fff;
	line-height: 0.3rem;
}

.spsl {
	width: 0.5rem;
	height: 0.3rem;
	display: block;
	text-align: center
}

.sousuo {
	width: 100%;
	height: 0.8rem;
	background: #FF3F25
}

.fenlei {
	width: 15%;
	font-size: 0.36rem;
	line-height: 0.8rem;
	text-align: center
}

.fenlei img {
	width: 60%;
	margin: 0.12rem 20%
}

.sousuokuang {
	float: right;
	margin: 0.1rem 0 0 0;
	width: 75%
}

.sousuokuang input {
	width: 100%;
	height: 0.6rem;
	border: none;
	margin-top: -0.05rem
}

.sousuokuang button {
	width: 0.6rem;
	height: 0.6rem;
	border: none;
	background: #fff url("<%=basePath%>/assets/images/fangdajing.png")
		no-repeat left center;
	background-size: cover
}

.dianputx {
	width: 20%;
	height: 1.2rem
}

.dianputx img {
	width: 1rem;
	margin: 0.1rem auto;
	height: 1rem;
	display: block;
	border-radius: 50%;
}

.dianpumc {
	width: 60%;
}

.dianpumc>h3 {
	color: #fff;
	font-size: 0.28rem;
	line-height: 0.8rem;
	margin-left: 2%;
	float: left;
}

.dianpumc>span {
	color: #fff;
	font-size: 0.2rem;
	line-height: 0.4rem;
	margin-left: 10%;
	height: 0.4rem;
	border: 1px solid #fff;
	padding: 0 0.1rem
	margin:auto auto;
}

.shuliang {
	color: #ccc;
	width: 48%;
	display: block;
	margin: 0.1rem 2%;
	height: 0.4rem;
	line-height: 0.4rem;
	text-align: right
}

.dianpuguanzhu {
	position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
}

.zbgouwuBox {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.8rem;
	border-top: 1px solid #f1f1f1;
	background: #fff;
	z-index: 1;
}

.heji {
	height: 0.8rem;
	line-height: 0.8rem;
	text-align: center;
	font-size: 0.26rem;
	margin-left: 0.2rem
}

.heji span {
	color: red
}

.jiesuan {
	width: 20%;
	height: 0.8rem;
	line-height: 0.8rem;
	color: #fff;
	text-align: center;
	font-size: 0.28rem;
	background: #FF3F25
}

.noSJ {
	width: 100%;
}

.noSJ img {
	width: 50%;
	margin: 20% auto 5%;
	display: block
}

.noSJ h3 {
	width: 100%;
	line-height: 0.6rem;
	font-weight: bold;
	text-align: center;
	color: #000
}

.noSJ p {
	width: 100%;
	font-size: 0.24rem;
	line-height: 0.6rem;
	text-align: center
}

.content_cont ul li .num {
	position: absolute;
	right: 0;
	bottom: 0.2rem;
	width: 1.3rem;
}

.content_cont ul li .num>span {
	color: #dd2727;
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #FF3F25;
	position: relative;
	vertical-align: middle;
	float: right
}

.content_cont ul li .num>span.add {
	
}

.content_cont ul li .num>input {
	display: inline-block;
	border: 0;
	width: 2em;
	text-align: center;
	height: 17px;
	line-height: 17px;
	vertical-align: middle;
	float: right
}

.content_cont ul li .num>span.add:before {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 7px;
	width: 1px;
	background: #FF3F25;
}

.content_cont ul li .num>span.add:after, .content_cont ul li .num>span.cut:after
	{
	content: "";
	position: absolute;
	top: 7px;
	left: 2px;
	right: 2px;
	height: 1px;
	background: #dd2727;
}

.navPOS {
	width: 100%;
	height: 70px;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #ffffff
}

.navPOS_li {
	width: 20%
}

.navPOS_li a img {
	width: 10%;
	display: block;
	margin: 20px auto 0;
}

.navPOS_li_big a img {
	width: 70%;
	margin: 0 auto
}

.navPOS_li a p {
	width: 100%;
	text-align: center;
	line-height: 30px;
	font-size: 12px
}
</style>
<script>
        $(function () {
        	
        	var isLogin = 0;
        	$.ajax({
    	    	url: "<%=basePath%>app/getAttention",
    	        type: 'post',
    	        data: {"targetId":"${goodsList[0].merchantId}","attentionType":1},
    	        dataType: 'json',
    	        async: false,
    	        success: function (data) {
    	        	if(typeof(data.state) == "undefined"){
    	        		isLogin = 0;
    	        	}else{
    	        		isLogin = 1;
    	        		var obj = data.attentionShopList;
    	        		if(obj.length > 0){
    	        			$(".guanzhuanniu").addClass('active');
                        	$(".guanzhuanniu").html('已关注');
    	        		}else{
    	        			$(".guanzhuanniu").removeClass('active');
  	                        $(".guanzhuanniu").html('+ 关注');
    	        		}
    	        	}
    	        },error:function (){
    	        }
    		});
            $('.header_bot ul').find('li').each(function () {
                $(this).click(function () {
                    $(this).siblings().removeClass('active');
                    $(this).addClass('active');
                })
            });
            $('.content_cont').find('li').each(function(){
            	$(this).find('a').find('img').height($(this).find('a').find('img').width());
            	var goodsNameHtml = $(this).find('.goodsName').html();
            	$(this).find('.goodsName').html(showText(goodsNameHtml, 31))
            })
            $('.guanzhuanniu').click(function(){
            	
            	if("<%=securityContextImpl%>" == "null"){
            		window.location.href = "<%=basePath%>app/appLogin2";
            		return;
            	}
            	
            	if($(this).html() == "+ 关注"){
            		$(this).addClass('active');
            		$(this).html('已关注');
            		var attentionCount = $(".guanzhushuliang span").html();
        			attentionCount = Number(attentionCount) + 1;
            		$(".guanzhushuliang span").html(attentionCount);
            	}else{
            		$(this).removeClass('active');
            		$(this).html('+ 关注');
            		var attentionCount = $(".guanzhushuliang span").html();
        			attentionCount -= 1;
            		$(".guanzhushuliang span").html(attentionCount);
            	}
            	$.ajax({
        	    	url: "<%=basePath%>app/updateAttention",
        	        type: 'post',
        	        data: {"targetId":"${goodsList[0].merchantId}","attentionType":1},
        	        dataType: 'json',
        	        success: function (data) {
        	        	
        	        },error:function (){
        	        }
        		});
            })
        })
        
        
		function showText(text, numSub){
			if(text == null){
				return "";
			}
			if(text.length > numSub){
				return text.substring(0, numSub) + "...";
			}
			return text;
		}
    </script>
</head>
<body>
	<input id="basePath" type="hidden" value="<%=basePath%>">
	<div class="header">
		<a class=returnInfo href="#" onclick="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
		<div class="sousuo clearFirx">
			<!-- <div class="fenlei float_r">
				<i class="fa fa-angle-left"></i>
			</div> -->
		</div>
		<div class='clearFirx'>
			<div class='float_l dianputx'>
				<img src='<%=basePath%>/assets/images/dianpu.png'>
			</div>
			<div class='float_l dianpumc clearFirx'>
				<h3 style="color: black;">${goodsList[0].merchantName}</h3>
<!-- 				<span>店铺标签</span> -->
			</div>
			<div class='float_r clearFirx dianpuguanzhu'>
				<span class='guanzhuanniu float_r' style="color: black;">+ 关注</span>
			</div>
<!-- 			<div class='float_r clearFirx'> -->
<%-- 				<span class='float_r' style="color: black;top: 1px;font-size: 0.2rem;width: 1.3rem;line-height: 0.4rem;"onclick="advice(${goodsList[0].merchantId})">投诉建议</span> --%>
<!-- 			</div> -->
		</div>
	</div>
	<c:choose>
		<c:when test="${not empty goodsList[0].goodsId}">
			<div class='zbgouwuBox clearFirx'>
				<div class='float_l heji'>
					合计：<span id="total_price">￥0.00</span>
				</div>
				<div class='float_r jiesuan' onclick="jiesuan()">结算</div>
			</div>
			<div class="content">
				<div class="content_cont">
					<ul id="ul">
						<c:forEach items="${goodsList}" varStatus="i" var="item">
						<li>
							<a href="<%=basePath%>app/toGoodsInfo?goodsId=${item.goodsId}" class="clearFirx">
								<img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${item.goodsThums}" class="shangjiatupian">
								<div class="shangjiajieshao">
									<h3 class="goodsName">${item.goodsName}</h3>
									<p class='xiaoliang'>月销${item.pageView}笔</p>
									<div class='clearFirx'>
										<span class="float_l" style="color: red;">
											<i class="fa fa-rmb"></i>
											<i style="font-size: 16px;">${item.goodsPrice}</i>
										</span>
									</div>
								</div>
							</a>
							<p class="num">
								<span class="add"></span>
								<c:choose>
									<c:when test="${item.goodsCount gt 0}">
										<input readonly type="text" value="${item.goodsCount}">
										<span class="cut"></span>

									</c:when>
									<c:otherwise>
										<input readonly type="text" value="${item.goodsCount}"
											style="display: none">
										<span class="cut" style="display: none"></span>

									</c:otherwise>
								</c:choose>
							</p> 
							<input class="goodsId" type="hidden" value="${item.goodsId}"/>
							<input class="goodsPrice" type="hidden" value="${item.goodsPrice}"/> 
							<input class="goodsStock" type="hidden" value="${item.goodsStock}"/>
						</li>
						</c:forEach>
					</ul>
				</div>
			</div>
		</c:when>
		<c:otherwise>
			<div class="noSJ">
				<img src="<%=basePath%>assets/images/bcz.png" alt="">
				<h3>该店铺下还没有商品哦</h3>
			</div>
		</c:otherwise>
	</c:choose>
</body>
<script>
	$(document).ready(function() {
		total()
		var goodsIds = "";
		$('ul li').each(function () {
			var goodsNum = $(this).find(".num").children('input').val();
			if(goodsNum > 0){
				goodsIds += $(this).find(".num").siblings('.goodsId').val()+","
			}
		});
		$.ajax({
	    	url: $("#basePath").val()+"app/checkShoppingCard",
	        timeout: 300000,
	        dataType: "json",
	        type: "post",
	        data: {
	        	"goodsIds":goodsIds,
	        	"userCheck":1
	        }
	    })
		
// 	    $('ul').find('li').each(function(){
// 	    	var val$(this).find('.num').find('.add').next().val()
// 	    })
	    
	    
		// 增加减少数量
		$('ul').find('.num').find('.cut').click(function() {
			var val = $(this).siblings('input').val();
			if (val >= 1) {
				val -= 1;
			}

			if(val < 1){
				$(this).siblings('input').val(val);
				$(this).css("display","none");
				$(this).siblings('input').css("display","none");
				$.ajax({
			    	url: $("#basePath").val()+"app/delShoppingCard",
			        timeout: 300000,
			        dataType: "json",
			        type: "post",
			        data: {
			        	"goodsIds":$(this).parent('.num').siblings('.goodsId').val(),
			        }
			    })
			}else{
				$(this).siblings('input').val(val);
				$.ajax({
			    	url: $("#basePath").val()+"app/checkShoppingCard",
			        timeout: 300000,
			        dataType: "json",
			        type: "post",
			        data: {
			        	"goodsIds":$(this).parent('.num').siblings('.goodsId').val(),
			        	"unitPrice":$(this).parent('.num').siblings('.goodsPrice').val(),
			        	"orderCount":val
			        }
			    })
			}
			total();

		});
		
		$('ul li').find('.num .add').click(function() {
			
			if("<%=securityContextImpl%>" == "null"){
        		window.location.href = "<%=basePath%>app/appLogin2";
        		return;
        	}
			
			var val = $(this).siblings('input').val();
			val ++;
			
			var goodsId = $(this).parent('.num').siblings('.goodsId').val();
			var goodsPrice = $(this).parent('.num').siblings('.goodsPrice').val()
			var goodsStock = $(this).parent('.num').siblings('.goodsStock').val()
			if(val > goodsStock){
	      		  layer.open({
      			    content: '库存不足,亲~'
      			    ,skin: 'msg'
      			    ,time: 2 //2秒后自动关闭
      			  });
			}else{
				if(val > 0){
					$(this).siblings('span').css("display","block");
					$(this).siblings('span').css("float","right");
					$(this).siblings('input').css("display","block");
					$(this).siblings('input').css("float","right");
				}
				$(this).siblings('input').val(val);
				$.ajax({
			    	url: $("#basePath").val()+"app/addShoppingCard",
			        timeout: 300000,
			        dataType: "json",
			        type: "post",
			        data: {
			        	"goodsId":goodsId,
			        	"unitPrice":goodsPrice,
			        }
			    })
			    total()
			}
			
		});
	})
	
	// 价格及购物车数量
	function total() {
		var totalPrice = 0;
		$('ul li').each(function () {
			var goodsNum = $(this).find(".num").children('input').val(),
				goodsPrice = $(this).find('.goodsPrice').val();
			totalPrice += parseFloat((goodsNum * goodsPrice).toFixed(2));
		});
		$('#total_price').text('￥' + totalPrice.toFixed(2));
	}
	
	function jiesuan(){
		if($('#total_price').text() == "￥0.00"){
			layer.open({
      			    content: '请选择商品,亲~'
      			    ,skin: 'msg'
      			    ,time: 2 //2秒后自动关闭
      			  });
			return;
		}
		window.location.href=$("#basePath").val()+"app/userAffirmOrder";
	}
	
    function classify(classifyId){
	    $.ajax({
	    	url: $("#basePath").val()+"app/getGoodsList",
	        timeout: 300000,
	        dataType: "json",
	        type: "post",
	        data: {
	        	"classifyId":classifyId
	        },
	        success: function (data) {
	            var html = "";
	            $.each(data, function (i, item) {
	                html += '<li>'+
                       	+'<a href="<%=basePath%>app/toGoodsInfo?goodsId=item.goodsId" class="clearFirx">'
                       	+'<img src="<%=basePath%>assets/images/tx.png" alt="" class="shangjiatupian">'
						+ '<div class="shangjiajieshao">'
						+ '<h3 class="dianpumingcheng">'
						+ item.goodsName
						+ '</h3>'
						+ '<p class="dianpupaiming">'
						+ item.goodsImage
						+ '</p>'
						+ '<span class="dianpubiaoqian">'
						+ item.goodsPrice
						+ '</span>库存：'
						+ item.goodsStock
						+ '</div>' + '</a>'
						+ '</li>';
				})
				$("#ul").html(html);
			}
		})
	}
    
    function advice(merchantId){
    	window.location.href=$("#basePath").val()+"app/toAdvice?goalId="+merchantId+"&urlState=0";
    }
</script>
</html>